<template>
  <div>
    <div 
      class="index-bg" 
      :style="bgTransform"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue"
import { useMouse } from "@vueuse/core"

// 获取鼠标位置
const { x, y } = useMouse()

// 计算背景变换样式
const bgTransform = computed(() => {
  // 获取窗口尺寸
  const centerX = window.innerWidth / 2
  const centerY = window.innerHeight / 2
  
  // 计算鼠标相对于中心点的偏移
  const deltaX = (x.value - centerX) / centerX
  const deltaY = (y.value - centerY) / centerY
  
  // 计算旋转角度 (减小幅度)
  const rotateX = deltaY * -3 // Y轴移动影响X轴旋转
  const rotateY = deltaX * 3  // X轴移动影响Y轴旋转
  const rotateZ = deltaX * -0.5  // 轻微的Z轴旋转增加立体感
  
  // 计算轻微的位移效果 (减小幅度)
  const translateX = deltaX * 8
  const translateY = deltaY * 8
  
  return {
    transform: `
      perspective(1200px) 
      rotateX(${rotateX}deg) 
      rotateY(${rotateY}deg) 
      rotateZ(${rotateZ}deg)
      translateX(${translateX}px)
      translateY(${translateY}px)
      scale(1.02)
    `,
    transition: 'transform 0.1s ease-out'
  }
})
</script>

<style scoped lang="scss">
.index-bg {
  width: 120%; // 增加宽度以完全避免边缘空白
  height: 120vh; // 增加高度以完全避免边缘空白
  position: fixed;
  top: -10%; // 居中偏移
  left: -10%;
  z-index: -1;
  background: url(../../../assets/layouts/bg-1.png) no-repeat;
  background-size: cover;
  background-position: center;
  transform-origin: center center; // 设置变换原点为中心
  transform-style: preserve-3d; // 保持3D效果
  will-change: transform; // 优化性能
}
</style>
